
;(function (doc) {
  const oSliderPage = doc.querySelector('.slider-page'),
        oScrollWrapper = oSliderPage.querySelector('.scroll-wrapper'),
        oSliderItems = oScrollWrapper.querySelectorAll('.slider-item'),
        pageWidth = oSliderPage.offsetWidth;

  let startX = 0, // 开始X坐标
      pageIndex = 0, // 当前页数
      distanceX = 0, // 移动的距离
      isMove = false;

  const init = () => {
    bindEvent();
  }

  // 绑定 touch事件
  function bindEvent() {
    oScrollWrapper.addEventListener('touchstart', handlerTouchStart, false);
    oScrollWrapper.addEventListener('touchmove', handlerTouchMove, false);
    oScrollWrapper.addEventListener('touchend', handlerTouchEnd, false);
  }

  function handlerTouchStart(e) {
    startX = e.touches[0].clientX; // touches多指触碰，[0]：一个手指
    console.log(startX);
  }

  function handlerTouchMove(e) {
    const moveX = e.touches[0].clientX;
    // console.log(moveX);

    if ((moveX > startX && pageIndex === 0) || // 第一页不能右滑，最后一页不能左滑
        (moveX < startX && pageIndex === oSliderItems.length - 1)) {
      return;
    }

    distanceX = moveX - startX;
    setTranslateX(- pageWidth * pageIndex + distanceX); // distanceX可能为正或负前面加上 - 号
    isMove = true;
  }

  function handlerTouchEnd() {
    if (isMove) {
      if(Math.abs(distanceX) >= pageWidth / 3) { // 如果滑动距离大于页面的三分之一
        if (distanceX > 0) { // 如果是往右滑 (上一页)
          pageIndex --;
        }
        if (distanceX < 0) { // 如果是往左滑 (下一页)
          pageIndex ++;
        }
      }
      // 回到之前的状态(页数的整距离)，不需要加 distanceX
      setTranslateX(- pageWidth * pageIndex); // 滑动距离 = 一页的距离 * 当前页
    }

    startX = 0;
    distanceX = 0;
    isMove = false;
  }

  function setTranslateX(transX) {
    oScrollWrapper.style.transition = 'all .1s';
    oScrollWrapper.style.transform = `translateX(${transX}px)`;
  }

  init();
})(document);
